@use "../../assets/scss/mixins/base" as mx;
@use "../../assets/scss/mixins/figure/graph" as gr;

html {
  box-sizing: border-box;
  line-height: 1.5;
  font-family: sans-serif;
  height: 100%;
  display: flex;
  * {
    margin: auto;
  }
}
* {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
  &::before,
  &::after {
    box-sizing: inherit;
  }
}
body {
  display: flex;
  justify-content: center;
  height: 100vh;
  width: 100%;
  background-color: hsl(40, 75%, 50%);
  font-size: 0.8em;
}

[class^="star"],
[class*=" star"] {
  width: 6em;
  height: 6em;
  margin: 0.5em;
  float: left;
}

.panel {
  @include mx.rect(21em, null, #eee, 0.5em);
  padding: 2em;
  display: inline-block;
  position: relative;
  border: 0.5em solid #bbb;
  font-size: 0.75em;

  .star-badge {
    @include gr.star_svg(20, 100, 85, hsl(0, 80%, 40%));
    transform: rotate(-10deg);
    display: table;
    font-size: 1.5em;
    position: absolute;
    top: -3em;
    left: -3em;
    filter: drop-shadow(1px 1px 1px hsla(0, 0%, 0%, 0.35));
    h6 {
      display: table-cell;
      vertical-align: middle;
      text-align: center;
      font-weight: bold;
      color: #fff;
      font-size: 1.5em;
      text-transform: uppercase;
    }
  }

  .star3 {
    @include gr.star_svg(3, 5, 1, hsl(0, 70%, 50%));
  }
  .star4 {
    @include gr.star_svg(4, 5, 2.5, hsl(40, 75%, 50%));
  }
  .star5 {
    @include gr.star_svg(5, 5, 2, hsl(80, 75%, 50%));
  }
  .star6 {
    @include gr.star_svg(6, 5, 1.3, hsl(120, 75%, 50%));
  }
  .star7 {
    @include gr.star_svg(7, 5, 1.5, hsl(160, 75%, 50%));
  }
  .star8 {
    @include gr.star_svg(8, 5, 2.2, hsl(200, 75%, 50%));
  }
  .star9 {
    @include gr.star_svg(9, 5, 1.75, hsl(240, 75%, 50%));
  }
  .star10 {
    @include gr.star_svg(10, 5, 2.3, hsl(280, 75%, 50%));
  }
  .star11 {
    @include gr.star_svg(11, 5, 2, hsl(320, 75%, 50%));
  }
}

@keyframes jiggle {
  from {
    transform: rotate(-3deg);
  }
  to {
    transform: rotate(3deg);
  }
}
.jiggle {
  cursor: pointer;
  &:hover {
    animation: jiggle 0.15s linear infinite alternate;
  }
  &:nth-of-type(even) {
    animation-direction: alternate-reverse;
  }
}

.star {
  @include gr.star;
}
